<template>
  <div id="loading" class="loading-content" :style="{ background: bgColor }">
    <div class="loading">
      <div class="circle">
        <span :style="{ background: color }"></span>
        <span :style="{ background: color }"></span>
        <span :style="{ background: color }"></span>
        <span :style="{ background: color }"></span>
      </div>
      <p :style="{ color: color }">{{ text }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
  const props = defineProps({
    color: {
      type: String,
      default: 'blue'
    },
    bgColor: {
      type: String,
      default: 'rgba(0, 0, 0, 0.2)'
    },
    text: {
      type: String,
      default: ''
    }
  });
</script>

<style scoped lang="scss">
  .loading-content {
    display: flex;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9999;
  }
  .loading {
    display: flex;
    width: 50%;
    height: 50%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  p {
    overflow: hidden;
  }
  .circle {
    width: 30px;
    height: 30px;
    position: relative;
    transform-origin: 50% 50%;
    animation: move 1.5s infinite linear;
    span {
      display: block;
      position: absolute;
      width: 12px;
      height: 12px;
      border-radius: 100%;
      animation: color 4s infinite linear;
    }
    span:nth-child(1) {
      top: 0;
      left: 0;
    }
    span:nth-child(2) {
      top: 0;
      right: 0;
    }
    span:nth-child(3) {
      bottom: 0;
      right: 0;
    }
    span:nth-child(4) {
      bottom: 0;
      left: 0;
    }
  }
  @keyframes move {
    0% {
      transform: rotate(0);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  @keyframes color {
    0% {
      opacity: 0.2;
    }
    100% {
      opacity: 0.6;
    }
  }
</style>
